<template>
	<div>

	 	<!--面包屑导航-->
	 	<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px;">
			  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
			  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<!--卡片-->
		<el-card class="box-card">
 			 
			<!--使用栅格系统  gutter的大小代表间距-->
			<el-row :gutter="30" >
				  <!--span的大小代表栅格的宽度-->
				  <el-col :span="10"><div class="grid-content bg-purple">
				  		<div style="margin-top: 15px;">
							  <el-input placeholder="请输入内容" v-model="Info.query"  class="input-with-select" clearable @clear="getUserList">
							  	<el-button slot="append" icon="el-icon-search" @click="queryName"></el-button>
							  </el-input>
						</div>
				  </div></el-col>
				  <el-col :span="6"><div class="grid-content bg-purple">
				  	<div style="margin-top: 15px;">
				  		<el-button type="primary" @click="addUser">添加</el-button>
				  	</div>
				  </div></el-col>
			</el-row>
			<!--表格区域-->
		<el-table :data="userlist2" style="width: 100%" stripe border highlight-current-row	>
		    <el-table-column prop="id" label="ID" >
		      	</el-table-column>
		      <el-table-column prop="username" label="姓名" >
		      </el-table-column>
		      <el-table-column prop="type" label="类型" >
		      </el-table-column>
		      <el-table-column prop="email" label="邮箱" >
		      </el-table-column>
		      <el-table-column prop="create_time" label="创建时间" >
		      </el-table-column>
		      <el-table-column prop="mg_state" label="状态" >
		      	<!--作用域插槽-->
		      	<template slot-scope="scope">
		      		<el-switch v-model="scope.row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="changeSwitch(scope.row)">
					</el-switch>
		      	</template>
		      </el-table-column>
		      <el-table-column prop="role_name" label="角色" >
		      </el-table-column>
		      <el-table-column prop="" label="操作" width="220px">
		      	<template slot-scope="scope">
		      		<!--编辑角色-->
		      		<el-button type="primary" icon="el-icon-edit" size="mini" @click=editUser(scope.row)></el-button>
					<!--删除角色-->
					<el-button type="danger" icon="el-icon-delete" size="mini" @click=deleteUser(scope.row)></el-button>
					<!--分配角色权限-->
					 <el-tooltip class="item" effect="dark" content="角色权限分配" placement="top" :enterable="false">
      					<el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
    				</el-tooltip>
		      	</template>
		      </el-table-column>
    		</el-table>
    		<!--配置分页区域-->
    		<div class="block">
			    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			      :current-page="Info.pagenum"  :page-sizes="[10, 20, 30, 50, 100]"
			      :page-size="Info.pagesize" layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>
            </div>
            
            <!--添加用户对话框-->
            <el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%"  >
			  <!--对话框主体-->
			  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				  <el-form-item label="用户姓名" prop="username"  required>
				    <el-input v-model="ruleForm.username" ></el-input>
				  </el-form-item>
				  <el-form-item label="用户类型" prop="type">
				    <el-select v-model="ruleForm.type" placeholder="请选择类型">
				      <el-option label="1" value="1"></el-option>
				      <el-option label="2" value="2"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item label="创建时间" required>
				    <el-col :span="11">
				      <el-form-item prop="create_time">
				        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.create_time" style="width: 100%;"></el-date-picker>
				      </el-form-item>
				    </el-col>
				  </el-form-item>
				  <!--验证邮箱-->
				  <el-form-item prop="email" label="邮箱"  required>
				    <el-input v-model="ruleForm.email"></el-input>
				  </el-form-item>
				  <!--状态-->
				  <el-form-item label="用户状态" prop="mg_state" required>
				    <el-select v-model="ruleForm.mg_state" placeholder="请选择用户状态">
				      <el-option label="可用" value=true></el-option>
				      <el-option label="不可用" value=false></el-option>
				    </el-select>
				  </el-form-item>
				  <!--角色-->
				  <el-form-item label="用户角色" prop="role_name" required>
				    <el-select v-model="ruleForm.role_name" placeholder="请选择用户角色">
				      <el-option label="管理员" value="1"></el-option>
				      <el-option label="职工" value="2"></el-option>
				      <el-option label="游客" value="3"></el-option>
				    </el-select>
				  </el-form-item>
			  </el-form>
			  <!--对话框根部-->
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="addDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="submitForm(ruleForm)">确 定</el-button>
			  </span>
			</el-dialog>
			
			<!--编辑角色对话窗-->
			<el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="50%"  >
			  <!--对话框主体-->
			  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				  <el-form-item label="用户姓名" prop="username" style="width: 80%"  required >
				    <el-input v-model="ruleForm.username" ></el-input>
				  </el-form-item>
				  <el-form-item label="用户类型" prop="type">
				    <el-select v-model="ruleForm.type" placeholder="请选择类型">
				      <el-option label="1" value="1"></el-option>
				      <el-option label="2" value="2"></el-option>
				    </el-select>
				  </el-form-item>
				  <el-form-item label="创建时间"  >
				    <el-col :span="11">
				      <el-form-item prop="create_time">
				        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.create_time" disabled style="width: 100%;"></el-date-picker>
				      </el-form-item>
				    </el-col>
				  </el-form-item>
				  <!--验证邮箱-->
				  <el-form-item prop="email" label="邮箱" style="width: 80%" required>
				    <el-input v-model="ruleForm.email"></el-input>
				  </el-form-item>
				  <!--状态-->
				  <el-form-item label="用户状态" prop="mg_state" required>
				    <el-select v-model="ruleForm.mg_state" placeholder="请选择用户状态">
				      <el-option label="可用" value=true></el-option>
				      <el-option label="不可用" value=false></el-option>
				    </el-select>
				  </el-form-item>
				  <!--角色-->
				  <el-form-item label="用户角色" prop="role_name" required>
				    <el-select v-model="ruleForm.role_name" placeholder="请选择用户角色">
				      <el-option label="管理员" value="1"></el-option>
				      <el-option label="职工" value="2"></el-option>
				      <el-option label="游客" value="3"></el-option>
				    </el-select>
				  </el-form-item>
			  </el-form>
			  <!--对话框根部-->
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="editDialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="editUserForm(ruleForm)">确 定</el-button>
			  </span>
			</el-dialog>
			
			<!--对话框删除提示-->
			<el-dialog title="删除提示" :visible.sync="deletedialogVisible" width="30%" >
			  <span>确定删除吗？</span>
			  <span slot="footer" class="dialog-footer">
			    <el-button @click="deletedialogVisible = false">取 消</el-button>
			    <el-button type="primary" @click="deleteUser2()">确 定</el-button>
			  </span>
			</el-dialog>

		</el-card>

	</div>
</template>

<script>
	export default {
		data(){
			return {
				Info:{
					query:'',
					//当前页数
					pagenum:1,
					//每页显示条数
					pagesize:10
				},
				userlist:[
					{id:1,username:'张三',type:1,email:'22ww1@163.com',create_time:'2020-01-01',mg_state:false,role_name:'超级管理员'},
					{id:2,username:'李四',type:1,email:'22ww2@163.com',create_time:'2020-01-02',mg_state:true,role_name:'用户'},
					{id:3,username:'王五',type:1,email:'22ww3@163.com',create_time:'2020-01-03',mg_state:true,role_name:'游客'},
					{id:4,username:'张三',type:1,email:'22ww1@163.com',create_time:'2020-01-01',mg_state:false,role_name:'超级管理员'},
					{id:5,username:'李四',type:1,email:'22ww2@163.com',create_time:'2020-01-02',mg_state:true,role_name:'用户'},
					{id:6,username:'王五',type:1,email:'22ww3@163.com',create_time:'2020-01-03',mg_state:true,role_name:'游客'},
					{id:7,username:'张三',type:1,email:'22ww1@163.com',create_time:'2020-01-01',mg_state:false,role_name:'超级管理员'},
					{id:8,username:'李四',type:1,email:'22ww2@163.com',create_time:'2020-01-02',mg_state:true,role_name:'用户'},
					{id:9,username:'王五',type:1,email:'22ww3@163.com',create_time:'2020-01-03',mg_state:true,role_name:'游客'},
					{id:10,username:'张三',type:1,email:'22ww1@163.com',create_time:'2020-01-01',mg_state:false,role_name:'超级管理员'},
					{id:11,username:'李四',type:1,email:'22ww2@163.com',create_time:'2020-01-02',mg_state:true,role_name:'用户'},
					{id:12,username:'王五',type:1,email:'22ww3@163.com',create_time:'2020-01-03',mg_state:true,role_name:'游客'},
					{id:13,username:'张三',type:1,email:'22ww1@163.com',create_time:'2020-01-01',mg_state:false,role_name:'超级管理员'},
					{id:14,username:'李四',type:1,email:'22ww2@163.com',create_time:'2020-01-02',mg_state:true,role_name:'用户'},
					{id:15,username:'王五',type:1,email:'22ww3@163.com',create_time:'2020-01-03',mg_state:true,role_name:'游客'},
					{id:16,username:'张三',type:1,email:'22ww1@163.com',create_time:'2020-01-01',mg_state:false,role_name:'超级管理员'},
					{id:17,username:'李四',type:1,email:'22ww2@163.com',create_time:'2020-01-02',mg_state:true,role_name:'用户'},
					{id:18,username:'王五',type:1,email:'22ww3@163.com',create_time:'2020-01-03',mg_state:true,role_name:'游客'},
				],
				//分页使用
				userlist2:[],
				total:18,
				//是否打开添加弹出框
				addDialogVisible : false,
				//是否打开编辑弹出框
				editDialogVisible : false,
				//是否打开删除提示对话框
				deletedialogVisible : false,
				//对添加角色的校验
				ruleForm: {
					id:null,
					username: '',
					create_time: '',
					type:null,
					email:'',
					role_name:'',
					mg_state:false
					
				},
				rules:{
					name: [
		            	{ required: true, message: '请输入姓名', trigger: 'blur' },
		            	{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
		       	   	],
		          	region: [
		            { required: true, message: '请选择用户类型', trigger: 'change' }
		          	],
		          	create_time: [
		            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
		          	],
		          	email: [
				      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
				      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
				    ],
		          	mg_state: [
		            { required: true, message: '请选择用户状态', trigger: 'change' }
		          	],
		          	role_name: [
		            { required: true, message: '请选择用户角色', trigger: 'change' }
		          	]
					
				}
			}
		},
		created(){
			this.getUserList()
		},
		methods:{
			//这里使用的是缓存中的数据，表格里的数据来自于userlist2
			async getUserList(){
				const {data:res} = await this.$http.get('users',{params: this.info});
				this.userlist2 = this.userlist.slice(this.Info.pagesize * (this.Info.pagenum - 1),this.Info.pagesize * this.Info.pagenum);
				this.total = this.userlist.length;
				if(res.meta.status!==200){
					this.$message.error("用户列表获取失败！启动本地缓存");
				}
				this.userList = res.data.users;
				this.total = res.data.total;
				console.log('res:'+res);
			},
			//自定义每页展示多少条数据,为什么不能实现？难道要后台分页？
			handleSizeChange(size){
				console.log("size:"+size);
				this.Info.pagesize = size;
				this.getUserList();
			},
			//监听页码改变
			handleCurrentChange(pagenum){
				this.Info.pagenum = pagenum;
				this.getUserList();
			},
			//监听状态开关按钮
			changeSwitch(userInfo){
				console.log("userInfo:"+userInfo.mg_state);
				this.userlist[userInfo.id-1].mg_state = userInfo.mg_state;
				console.log(this.userlist[userInfo.id-1]);
				this.getUserList();
				console.log("userInfo2:"+userInfo.mg_state);
				this.$message.success("缓存修改成功！");
//				const {data:res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`,{uId:userInfo.id,type:userInfo.type});
//				//校验数据
//				if(res.meta.status!==200){
//					return this.$message.error("无法访问数据库，只能修改缓存！");
//				}
//				this.$message.success("修改成功！");
			},
			//查询事件,筛选
			queryName(){
				console.log(this.Info.query);
				if(this.Info.query === ""){
					
				 	this.getUserList();
				 	return this.$message.error("字符串不能为空！");
				}
				
//				this.userlist2 = this.userlist.filter((item,index,arr) => {
//					item.username.indexOf(this.Info.query)!=-1
//				})
				//检索表格，寻找匹配的元素
				this.userlist2 = [];
				for (let i=0;i>this.userlist.length-1;i++) {
					if(this.userlist[i].name.indexOf === this.Info.query ){
						this.userlist2.push(this.userlist[i]);
					}
				}
				
				if(this.userlist2.length === 0){
					return this.$message.error("没找到结果！");
				}
			},
			//打开添加事件对话框
			addUser(){
				console.log("add事件");
				this.addDialogVisible = true;
			},
			//表格添加事件
			submitForm(res){
				let uid = this.userlist.length + 1;
				let arr = {id:uid,username:res.username,type:res.type,email:res.email,create_time:res.create_time,mg_state:res.mg_state,role_name:res.role_name}
				console.log("arr: !"+arr);
				this.userlist.push(arr);
				this.addDialogVisible = false;
				let uid2 = this.userlist.length;
				console.log("UID2:"+uid2);
				this.$message.success("成功添加角色到缓存！");
				return this.getUserList();
			},
			//表格编辑事件
			editUser(res){
				console.log("编辑事件："+res.username);
				//打开对话窗
				this.editDialogVisible = true;
				//设置对话框中的属性。
				this.ruleForm.id = res.id,
				this.ruleForm.username = res.username,
				this.ruleForm.create_time = res.create_time,
				this.ruleForm.type = res.type,
				this.ruleForm.email = res.email,
				this.ruleForm.role_name = res.role_name,
				this.ruleForm.mg_state = res.mg_state;
			},
			//表格编辑后提交事件
			editUserForm(res){
				if(res == null){
					this.$message.error("读取数据错误，请刷新重试！");
				}
				console.log("编辑修改事件"+res.name);
				//将修改后的数据放入一个新数组
				let arr = {id:res.id,username:res.username,type:res.type,email:res.email,create_time:res.create_time,mg_state:res.mg_state,role_name:res.role_name}
				console.log(arr);
				this.userlist[res.id-1] = arr;
				this.$message.success("修改成功！");
				//关闭弹出层
				this.editDialogVisible  = false;
				return this.getUserList();
			},
			//表格删除事件，主要打开对话窗
			deleteUser(res){
				console.log("删除事件:"+res.username);
				//打开对话窗
				this.deletedialogVisible = true;
				console.log("deletehandleClose");
				//初始化
				this.ruleForm.id = null;
				this.ruleForm.id = res.id;
			},
			//删除事件对话窗，主删除事件。
			//存在bug
			deleteUser2(){
				console.log("delete2::::");
				this.userlist.splice(this.ruleForm.id - 1,1);
				console.log("id::::"+this.ruleForm.id);
				this.$message.success("删除成功！");
				this.deletedialogVisible = false;
				return this.getUserList();
			}
		
		}
	}
</script>

<style>
</style>